<template>
  <div class="body">
    <div class="mb">
      <div class="personnel">
        <div class="nva">
          <div class="Youth">{{name}}</div>
          <div class="list" @click="apply()">申请列表</div>
          <div class="sum">{{count}}位成员</div>
        </div>
      </div>
      <div class="" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
        <ul class="mui-table-view">
          <li v-for="(li,index) in list" :key="index" class="mui-table-view-cell ">
            <div class="mui-slider-right mui-disabled">
              <a class="mui-btn mui-btn-red" @click="delPerson(li.uid)">删除</a>
            </div>
            <div class="person mui-slider-handle" >
              <div class="person_list">
                <div class="headIcon" :style="{background: 'url('+ li.photo + ')'}"></div>
                <div class="name" @click="toUser(li.uid)">{{li.name}}</div>
                <div class="discovery">
                  <div></div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
import mui from '../style/js/mui.min'
import { isLogin } from '@/api/login'
import { getMemberList, agree } from '@/api/society'
mui.init()
export default {
  name: 'PersonList',
  data () {
    return {
      list: [],
      name: '',
      count: '',
      page: 1,
      finalPage: 1,
      sid: this.$route.query.sid
    }
  },
  created () {
    this.isLogin()
    this.loadList(1)
  },
  methods: {
    delPerson (uid) {
      agree({
        sid: this.sid,
        uid: uid,
        status: '3'
      })
        .then(res => {
          alert(res.msg)
          location.reload()
          // this.loadList(1)
        })
        .catch(err => {
          console.log(err)
        })
    },
    isLogin () {
      isLogin().then(res => {
        if (res.code === 0) {
          alert('请先登录')
          this.$router.push('/login')
        }
      })
    },
    // TODO: 分页问题
    loadMore () {
      if (this.finalPage >= this.page) {
        this.busy = true
        console.log(123123)
        this.page++
        this.loadList(this.page)
        setTimeout(() => {
        // 这里请求接口去拿数据，实际应该是调用一个请求数据的方法
          this.busy = false
          console.log(454545)
        }, 1000)
      } else {
        this.busy = false
      }
    },
    loadList (page) {
      getMemberList({
        sid: this.$route.query.sid,
        status: '1',
        page: page
      }).then(res => {
        if (res.code === 0) {
          this.$router.go(-1)
        } else {
          this.finalPage = res.data.last_page
          this.name = res.msg
          this.count = res.data.total
          this.list = this.list.concat(res.data.data)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    apply () {
      this.$router.push('/apply_list?sid=' + this.$route.query.sid)
    },
    toUser (uid) {
      this.$router.push('/user?sid=' + this.$route.query.sid + '&uid=' + uid)
    }
  }
}
</script>

<style type="text/css" scoped>
@import '../style/css/mui.min';
* {
  margin: 0;
  padding: 0;
  touch-action: pan-y;
}

.body {
  width: 100%;
  min-height: 600px;
  height: auto;
  background: url(../style/img/bg-bj.png) no-repeat;
  font-family: PingFang SC;
}
.mb {
  width: 100%;
  height: inherit;
  min-height: 600px;
  background: rgba(255, 255, 255, .3);
}
.mui-content > .mui-table-view:first-child {
  margin-top: -1px;
}

.mui-pull-caption {
  display: none !important;
}
#inner {
  /* margin-top: 5rem; */
  height: auto;
  overflow-y: auto;
}

.person {
  /* float: left; */
  width: 92%;
  margin-left: 4%;
  /* background: white; */
}

.person_list {
  /* background: rgba(0, 0, 0, .1); */
  /* border-bottom: solid 1px rgba(118, 102, 102, .2); */
  width: 100%;
  height: 69px;
}
.mui-table-view {
  /* opacity: .1; */
  background:rgba(255,255,255,.1);
}
.mui-table-view-cell>.mui-slider-handle {
  background:rgba(255,255,255,0);
}
.headIcon {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  float: left;
  margin-top: 10px;
  margin-left: 16px;
  background-size: cover !important;
}

.name {
  width: 45%;
  height: 100%;
  float: left;
  line-height: 70px;
  /* margin-left: 8px; */
  font-size: 18px;
  font-weight: 600;
  color: rgba(22, 22, 22, 1);
  text-align: center;
}

.discovery {
  float: right;
  display: flex;
  justify-content: right;
  align-items: center;
  margin-top: 20px;
  margin-right: 25px;
}

.discovery div {
  background: url(../style/img/sign.png) no-repeat;
  background-size: cover;
  width: 10px;
  height: 20px;
  float: right;
  display: inline-block;
}

.nva {
  float: left;
  width: 100%;
  height: 68px;
  /* background: white; */
  position: relative;
  z-index: 999;
}

.Youth {
  float: left;
  font-size: 20px;
  font-weight: 600;
  line-height: 69px;
  padding-left: 10px;
  max-width: 180px;
  height: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sum {
  float: right;
  font-size: 13px;
  font-weight: 600;
  line-height: 69px;
  padding-right: 10px;
  color: #777777;
}

.list {
  width: 90px;
  height: 32px;
  float: right;
  background: #f97782;
  border-radius: 15px;
  color: white;
  text-align: center;
  line-height: 32px;
  margin: 17px 10px;
}

.personnel {
  /* float: left; */
  width: 100%;
  /* margin-left: 3%; */
}

.mui-scroll-wrapper {
  top: 68px;
}

.mui-content {
  background: white;
}

[v-cloak] {
  display: none;
}

.noData {
  text-align: center;
  line-height: 44px;
  color: grey;
}
</style>
